<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p v-for="(value, key) in props.row" :key="key" m="t-0 b-2">
            {{ key + ': ' + value }}
          </p>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      :label="$t('pageInventory.table.PCIInfo')"
      prop="PCIInfo"
    />
  </el-table>
</template>

<script setup lang="ts">
import { usePciStore } from '@/store/SystemManagement/SystemInformation/PciStore';
import _ from 'lodash';

const pciStore = usePciStore();
pciStore.getPciInfo();

const tableData = computed(() => {
  const data = _.cloneDeep(pciStore.pciInfo);
  data.map((item: { [x: string]: any }) => {
    Object.keys(item).forEach((key) => {
      if (item[key] === undefined) {
        item[key] = '--';
      }
    });
  });
  return data;
});
</script>
